<template>
	<view>


		<gui-page-loading ref="guipageloading">
			<!-- 可以通过插槽添加自定义内容，如 加载提示文本 -->
			<text class="gui-block-text gui-text-small gui-text-center gui-color-gray gui-italic"
				style="padding-top:10rpx;">loading</text>
		</gui-page-loading>
		
		
		<view class="gui-list gui-padding">
			<view class="gui-list-items">
				<view class="gui-list-image ucenter-face gui-relative">
					<image class="gui-list-image ucenter-face-image"
						:src="avatar_pic"
						mode="aspectFill"></image>
				</view>
				<view class="gui-list-body">
					<view class="gui-list-title">
						<text class="gui-list-title-text gui-primary-color">{{nickname}}</text>
					</view>
					<text class="gui-list-body-desc gui-color-gray gui-block" v-if="identity_list.length>0">身份切换</text>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
		</view>
		<view class="gui-margin-top">
			<gui-swiper :swiperItems="swiperItems" imgMode="scaleToFill" :width="750" :height="330"></gui-swiper>
		</view>
		<view class="gui-list gui-margin-top gui-padding-x">
			<view class="gui-list-items">
				<text class="gui-list-icon gui-icons gui-color-blue">&#xe60d;</text>
				<view class="gui-list-body gui-border-b">
					<view class="gui-list-title">
						<text class="gui-list-title-text">我的订单</text>
						
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
			<view class="gui-list-items">
				<text class="gui-list-icon gui-icons gui-color-green">&#xe612;</text>
				<view class="gui-list-body gui-border-b">
					<view class="gui-list-title">
						<text class="gui-list-title-text">我的收藏</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
			<view class="gui-list-items">
				<text class="gui-list-icon gui-icons gui-color-orange">&#xe60d;</text>
				<view class="gui-list-body gui-border-b">
					<view class="gui-list-title">
						<text class="gui-list-title-text">球童申请</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
			<view class="gui-list-items">
				<text class="gui-list-icon gui-icons gui-color-red">&#xe60d;</text>
				<view class="gui-list-body">
					<view class="gui-list-title">
						<text class="gui-list-title-text">助教申请</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
		</view>
		<!-- <view class="ucenter-line gui-bg-white gui-dark-bg-level-3"></view> -->
		<view class="gui-padding-x">
			<view class="gui-list-items">
				<text class="gui-list-icon gui-icons gui-color-yellow">&#xe60d;</text>
				<view class="gui-list-body gui-border-b">
					<view class="gui-list-title">
						<text class="gui-list-title-text">教练申请</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
			<view class="gui-list-items">
				<text class="gui-list-icon gui-icons gui-color-red">&#xe666;</text>
				<view class="gui-list-body">
					<view class="gui-list-title">
						<text class="gui-list-title-text">我的消息</text>
						<text class="gui-badge gui-bg-red gui-color-white" v-if="no_read_num>0">{{no_read_num}}</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
			<view class="gui-list-items">
				<text class="gui-list-icon gui-icons gui-color-red">&#xe626;</text>
				<view class="gui-list-body">
					<view class="gui-list-title">
						<text class="gui-list-title-text">联系客服</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
			<view class="gui-list-items">
				<text class="gui-list-icon gui-icons gui-color-red">&#xe63b;</text>
				<view class="gui-list-body">
					<view class="gui-list-title">
						<text class="gui-list-title-text">关于我们</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
			<view class="gui-list-items">
				<text class="gui-list-icon gui-icons gui-color-red">&#xe611;</text>
				<view class="gui-list-body">
					<view class="gui-list-title">
						<text class="gui-list-title-text">商家入驻</text>
					</view>
				</view>
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
		</view>
		<view class="ucenter-line gui-bg-white gui-dark-bg-level-3"></view>
		<view hover-class="gui-tap">
			<text class="gui-text-center gui-block-text gui-icons logoff gui-color-gray">&#xe62e; 退出登录</text>
		</view>
		
		<gui-iphone-bottom></gui-iphone-bottom>

	</view>
</template>
<script>
	var img =
		"https://images.unsplash.com/photo-1661956602868-6ae368943878?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw2MHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=90";
	export default {
		data() {
			return {
				nickname:'',
				avatar_pic:img,
				identity_list:[],
				no_read_num:0,
				items: [
					[80, '', '动态'],
					[100, '', '好友'],
					[50, '', '私信'],
					['￥199', '', '余额']
				],
				swiperItems: []
			}
		},
		methods: {
			swiperchange: function(e) {
				console.log(e);
			},
			taped: function(e) {
				uni.showToast({
					title: "您点击了第 " + e + " 个项目",
					icon: "none"
				});
			},
			my_info() {
				let _this = this;
				_this.$refs.guipageloading.open();
				uni.request({
					url: _this.serverUrl + '/api.user/my_info', //仅为示例，并非真实接口地址。
					
					header: {
						token: _this.token
					},

					success: (res) => {

						_this.$refs.guipageloading.close();

						var return_data = res.data;


						console.log(return_data);
						if (return_data.code == 0) {
							_this.nickname = return_data.data.member_info.nickname;
							_this.avatar_pic = return_data.data.member_info.avatar_pic;
							_this.no_read_num = return_data.data.no_read_num;
							_this.swiperItems = return_data.data.banner_list;
						}
					}
				});
			}
		},
		onLoad: function() {
			this.my_info();
		}
	}
</script>
<style scoped>
	.ucenter-face {
		width: 100rpx;
		height: 100rpx;
	}

	.ucenter-face-image {
		width: 100rpx;
		height: 100rpx;
	}

	.ucenter-line {
		height: 20rpx;
		margin: 16rpx 0;
	}

	.logoff {
		line-height: 88rpx;
		font-size: 28rpx;
	}

	.gui-list-title-text {
		line-height: 60rpx;
	}
</style>